"""
@author: Gaoyaoxia
@date: 2021-03-12 15:43:42
"""
<!-- 征集通知 -->
<template>
  <div class="base-table-box">
    <div class="table-select-group">
      <div class="left">
        <s-select
          style="width: 102px"
          :selectOption="proposal.searchType5"
          v-model="params.type"
        ></s-select>
        <a-input
          class="search-input"
          v-model="params.search"
          placeholder="请输入搜索内容"
        />
        <a-button style="margin-left: 16px" type="primary" @click="search"
          >查询</a-button
        >
        <a-button @click="reset" class="btn-reset">重置</a-button>
      </div>
    </div>
    <a-table
      :pagination="pagination"
      :columns="columns"
      :data-source="tableData"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%' }"
    >
      <template slot="noticeTitle" slot-scope="text, record">
        <router-link
          class="link-a"
          :to="{
            path: '/cppccproposal/noticedetail',
            query: { id: record.id }
          }"
          target="_blank"
        >
          {{ text }}
        </router-link>
      </template>
      <template slot="status" slot-scope="text, record">
        <font :color="record.status == '未读' ? 'red' : ''">
          {{ text }}
        </font>
      </template>
      <template slot="replyDesc" slot-scope="text, record">
        <a class="link-a" v-if="record.replyDesc" @click="showReply(record)">
          查看回复内容
        </a>
      </template>
      <template slot="action" slot-scope="text, record">
        <router-link
          :to="{
            path: '/cppccproposal/replynotice',
            query: { id: record.id }
          }"
          target="_blank"
          >回复</router-link
        >
      </template>
    </a-table>
    <!-- 回复详情弹窗 -->
    <a-modal
      :visible="visible"
      title="回复详情"
      width="800px"
      @cancel="visible = false"
      :footer="null"
    >
      <div class="desc-content">
        <div class="content">
          <ul>
            <li><span>回复人：</span><p>李菲菲</p></li>
            <li><span>回复方式：</span><p>系统</p></li>
            <li><span>回复时间：</span><p>2021-03-03 11:39</p></li>
            <li><span>回复内容：</span><p>好的，知道了</p></li>
          </ul>
        </div>
        <div class="footer">
          <a-button type="primary" @click="visible = false">关闭</a-button>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import paging from 'mixins/paging'
import proposalTypeSelect from 'components/form/proposalTypeSelect'
import { proposal } from 'assets/js/select-option-list'
const columns = [
  {
    title: '通知标题',
    dataIndex: 'noticeTitle',
    width: 280,
    ellipsis: true,
    scopedSlots: { customRender: 'noticeTitle' }
  },
  {
    title: '发布单位',
    dataIndex: 'pubUnit',
    width: 140
  },

  {
    title: '发布时间',
    dataIndex: 'pubDate',
    width: 200,
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 140,
    scopedSlots: { customRender: 'status' },
    sorter: (a, b) => a.name.length - b.name.length
  },
  {
    title: '回复内容',
    dataIndex: 'replyDesc',
    width: 140,
    scopedSlots: { customRender: 'replyDesc' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 140,
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  mixins: [paging],
  components: { proposalTypeSelect },
  data() {
    return {
      columns,
      proposal,
      //查询
      strSIds: [],
      params: {
        type: ''
      },
      visible: false,
      //table
      tableData: [],
      loading: false
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    //获取列表数据
    getTableData() {
      this.tableData = [
        {
          key: 1,
          noticeTitle: '关于印发冬春季农村地区新冠肺炎疫情防控工作方案的通知',
          pubUnit: '政协开发',
          pubDate: '2021-03-11 16:11',
          status: '已读',
          replyDesc: ''
        },
        {
          key: 2,
          noticeTitle: '提案征集通知流程',
          pubUnit: '政协开发',
          pubDate: '2021-03-11 16:11',
          status: '已读',
          replyDesc: ''
        },
        {
          key: 3,
          noticeTitle: '4',
          pubUnit: '政协开发',
          pubDate: '2021-03-11 16:11',
          status: '未读',
          replyDesc: '查看回复内容'
        }
      ]
      this.pagination.total = 200
    },
    //查询
    search() {},
    //查看回复内容
    showReply(record) {
      this.visible = true
    },
    //重置
    reset() {
      this.params = {
        strSId: '十四届四次',
        proposalType: undefined,
        proposerType: undefined,
        type: ''
      }
    }
  },
  created() {}
}
</script>
<style lang='less' scoped>
.desc-content {
  height: 490px;
//   padding: 15px;
  font-size: 16px;
  color: #333;
  .content {
    height: 200px;
    margin: 0 0 30px;
    border: 1px solid #ccc;
    border-bottom: none;
    ul li {
      border-bottom: 1px solid #ccc;
      text-align: left;
      height: 50px;
      box-sizing: border-box;
      line-height: 30px;
      padding: 9px 15px;
      vertical-align: middle;
      span{
          float: left;
          color: #919191;
      }
      p{
          margin-left: 85px;
      }
    }
  }
  .footer {
    text-align: center;
  }
}
</style>